<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="5">
          <div style="border:1px solid #eee;min-height:calc(100vh - 150px);padding:20px 10px;min-width: 200px">
             <div class="customer-setting-type">
                 <div class="type-item" :class="{'active': activeIndex == index}" v-for="(item,index) in list" @click="changeCdtId(index,item)">{{item.cdtName}}</div>
             </div>
          </div>
        </el-col>
        <el-col :span="19" v-if="list[activeIndex]">
          <div style="overflow: hidden">
            <div style="font-size:16px;font-weight: bold;float: left">{{list[activeIndex].cdtName}}</div>
            <el-button
              v-if="isCanSettingByAdd"
              style="float:right;"
              size="small"
              @click="showDialog('add')"
              type="primary">
              新增
            </el-button>
          </div>
          <el-table ref="advertisementTable"
                    :data="list[activeIndex].data"
                    style="width: 100%;margin-top:20px"
                    v-loading="listLoading" border>
            <el-table-column label="名称">
              <template slot-scope="scope">
                {{scope.row.cddValue}}
              </template>
            </el-table-column>

            <el-table-column label="状态"  align="center">
              <template slot-scope="scope">
                <el-switch
                  @change="changeStatus(scope.row)"
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="2">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="排序"  align="center">
              <template slot-scope="scope">
                <i class="el-icon-top" style="font-size:18px;cursor: pointer" @click="changeSort('up',scope.row)"></i>
                <i class="el-icon-bottom" style="font-size:18px;cursor: pointer" @click="changeSort('down',scope.row)"></i>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="isCanSettingByEdit"
                  size="mini"
                  type="text"
                  @click="showDialog('edit',scope.row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>


      <!---新增弹窗-->
      <el-dialog
              :close-on-click-modal="false"
        :title="title"
        :visible.sync="dialogVisible"
        width="400px">
        <div style="max-height: 450px;overflow: auto">
          <el-form size="mini" label-width="100px" :model="value" ref="valueForm" :rules="rules">
            <el-form-item label="名称：" prop="cddValue">
              <el-input v-model="value.cddValue"></el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-switch
                v-model="value.status"
                :active-value="1"
                :inactive-value="2">
              </el-switch>
            </el-form-item>
            <el-form-item label="排序：" prop="sortIndex">
              <el-input v-model="value.sortIndex"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import {getConfigList,createConfigInfo,updateSort} from '@/api/partner'
  import {validateInt} from '@/utils/validate';
  import store from '@/store'
  const defaultItem = {
      "cdtId":'',
      "cddValue": "",
      "status": 1,
      "sortIndex": 0
  };
    export default {
      name: "customerSetting",
      data() {
          const isValidateInt = (rule, value, callback) => {
              if (!validateInt(value)) {
                  callback(new Error('请输入正整数'))
              } else {
                  callback()
              }
          };
        return {
          roles:store.getters.roles ? store.getters.roles : [],
          list:[],
          listLoading:true,
          dialogVisible:false,
          value: JSON.parse(JSON.stringify(defaultItem)),
          total:null,
          activeIndex:0,
          rules:{
              cddValue:[{required: true, message: '请填写配置名称', trigger: 'blur'},],
              sortIndex:[{ required: true, trigger: 'blur' ,validator: isValidateInt}]
          },
          title:'',
          btnLoading:false,
        }
      },
        computed: {
            isCanSettingByAdd() {
                if(this.roles.indexOf("settingByAdd") != -1){
                    return true
                }else{
                    return false
                }
            },
            isCanSettingByEdit(){
                if(this.roles.indexOf("settingByEdit") != -1){
                    return true
                }else{
                    return false
                }
            },
        },
      created(){
          this.getList();
      },
      filters: {
      },
      methods: {
        //获取配置列表
        getList(){
          this.listLoading = true;
            getConfigList().then((res)=>{
              this.list = res;
              this.listLoading = false;
          }).catch(()=>{
              this.listLoading = false;
          });
        },

        //切换配置项
        changeCdtId(index,item){
            this.activeIndex = index;
        },

          //修改排序
          changeSort(type,item){
              updateSort({technique:type,cddId:item.cddId}).then(()=>{
                  this.getList()
              })
          },

        //修改状态
        changeStatus(item){
            createConfigInfo(item).then(()=>{
                this.$message({
                    type: 'success',
                    message: '操作成功'
                });
                this.getList();
            })
        },

        /**
         * 显示弹窗
         */
        showDialog(type,item){
          this.dialogVisible = true;
          if(type == 'add'){
              this.title = '新增配置';
              this.value =  JSON.parse(JSON.stringify(defaultItem));
          }else{
              this.title = '修改配置'
              this.value =  JSON.parse(JSON.stringify(item));
          }
        },

        //关闭弹窗
        handleClose(){
            this.$refs.valueForm.clearValidate();
            this.dialogVisible = false;
            this.btnLoading = false;
        },
        /**
         * 提交配置
         */
        handleConfirm(){
            this.$refs.valueForm.validate((valid) => {
                if (valid) {
                    this.btnLoading = true;
                    let data = {};
                    data = JSON.parse(JSON.stringify(this.value));
                    data.cdtId = this.list[this.activeIndex].cdtId;
                    createConfigInfo(data).then(()=>{
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                        this.handleClose();
                        this.getList();
                    })
                }
            })
        },

      },

    }
</script>

<style scoped lang="scss">
    .recordItem{
      font-size:12px;
      margin-bottom:10px;
      .time{
        display: inline-block;
        width:120px;
        vertical-align: top;
      }
      .text{
        display: inline-block;
        vertical-align: top;
        width:calc(100% - 170px);
      }
    }
    .img-div{
      font-size:12px;
      color:#666;
      display: inline-block;
      border:1px dashed #eee;
      padding:10px;
      border-radius: 5px;
      margin-right:10px;
      cursor: pointer;
      img{
        width:100px;
        height:64px;
        object-fit: contain;
      }
      .text{
        height:20px;
        line-height: 20px;
      }
    }
    .customer-setting-type{
        .type-item{
          line-height: 36px;
          font-size:14px;
          cursor: pointer;
          text-align: center;
        }
        .type-item.active{
          background: #ebf2fd;
        }
        .type-item:hover{
          background: #F5F7FA;
        }
        .type-item.active:hover{
          background: #e7f1ff;
        }
    }
</style>
